<template>
    <v-divider class="border-opacity-100" :thickness="4" color="info" style="margin-top: 10px;"></v-divider>
    <v-card color="#E8EAF6" style="padding: 0px;">
        <div
            class="container"
            style="margin-top: 5px"
        >
            <h4 class="title">{{ title }}</h4>
            <div class="icons">
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{ color: showAll ? 'black' : 'grey' }"
                            style="margin-right: 10px"
                            icon="mdi-square-rounded-outline"
                            v-bind="props"
                            @click="
                                () => {
                                    showAll = !showAll
                                }
                            "
                        ></v-icon> </template
                    >{{ iconTipName.split(',')[0] }}
                </v-tooltip>
                <v-tooltip location="top">
                    <template v-slot:activator="{ props }">
                        <v-icon
                            :style="{ color: !showAll ? 'black' : 'grey' }"
                            style="margin-right: 10px"
                            icon="mdi-border-radius"
                            v-bind="props"
                            @click="
                                () => {
                                    showAll = !showAll
                                }
                            "
                        ></v-icon> </template
                    >{{ iconTipName.split(',')[1] }}
                </v-tooltip>
            </div>
        </div>
        <div
            v-if="showAll"
            style="padding: 0 10px 0 10px"
        >
            <v-slider
                v-model="valueAll"
                max="50"
                step="0.1"
                thumb-color="black"
                hide-details
                thumb-label
            ></v-slider>
        </div>
        <div
            v-else
            class="container"
            style="margin-bottom: 5px"
        >
            <input
                v-for="(value, index) in valueArray"
                :key="index"
                class="input"
                style="text-align: center"
                :style="{
                    marginLeft: index === 0 ? '35px' : '2px',
                    marginRight: index === 3 ? '35px' : '2px'
                }"
                :value="value.replace('px', '')"
                @change="
                    (e) => {
                        valueArray[index] = e.target.value + 'px'
                        if (index === 0) {
                            valueAll = e.target.value
                        }
                        attr.style[styleName] = valueArray.join(' ')
                        designStore.rerender()
                    }
                "
            />
        </div>
    </v-card>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
export default {
    name: 'cornerArea',
    props: {
        attrAttr: Object,
        styleName: String,
        title: String,
        iconTipName: String
    },
    data() {
        return {
            designStore: useDesignStore(),
            attr: this.attrAttr,
            showAll: true,
            valueArray: [],
            valueAll: ''
        }
    },
    mounted() {
        if (this.attr.style[this.styleName] === '') {
            this.valueArray = ['0px', '0px', '0px', '0px']
            this.valueAll = '0'
        } else {
            this.valueArray = this.attr.style[this.styleName].split(' ')
            this.valueAll = this.valueArray[0].replace('px', '')
        }
    },
    watch: {
        valueAll(newValue, oldValue) {
            if (this.showAll) {
                for (var i = 0; i < 4; i++) {
                    this.valueArray[i] = String(newValue).split('.')[0] + 'px'
                }
                this.attr.style[this.styleName] = this.valueArray.join(' ')
                this.designStore.rerender()
            }
        }
    }
}
</script>

<style>
.container {
    display: flex;
    justify-content: space-between;
}

.title {
    margin: 3px 0 3px 5px;
    color: grey;
    justify-content: flex-start;
}

.icons {
    justify-content: flex-end;
}
</style>
